<template>
	<view class="base">
		<view class="head">
			{{props.name}}
		</view>
		<view v-for="item in rendList">
			<card :eng="item.eng" :chi='item.chi' />
		</view>
		<view class="controller">
			<button @click="pre">上一页</button>
			{{page}}
			<button @click="next">下一页</button>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, watch } from 'vue';
	import { TheWord } from '../../type';
	import card from '../../conpnoent/card.vue'
	import { GetList, InitPractice, getRandomWord } from '../../api/api';
	// import { log } from 'console';
	// const [word, setWord] = useState<TheWord[]>([])
	const word = ref<TheWord[]>([])
	// const [page, setpage] = useState(1)
	const page = ref(1)
	// const [list, setList] = useState<TheWord[]>([])
	// 接受后端传入的单词表
	let list : TheWord[] = []
	const rendList = ref<TheWord[]>([])
	// const [head,sethead] = useState('')
	const head = ref('')
	// 获取参数
	const props = defineProps({
		name: {
			type: String,
		}
	})
	function getList() {
		if (props.name != undefined) {
			GetList(props.name).then((response => {
				// console.log(response)
				list = response
				rendList.value = list.slice((page.value - 1) * 5, page.value * 5)
			}))
		}
	}
	// 定义页面变化函数
	function next() {
		console.log('next')
		const pa = page.value + 1
		const total = Math.ceil(list.length/5)
		if (pa  <= total) {
			page.value = pa
		}
	}
	function pre() {
		const pa = page.value - 1
		console.log('pre')
		if (pa > 0) {
			page.value=pa
		}
	}
	
	//执行函数
	getList()
	
	
	// 监听页码
	watch(page,(newvalue,oldValue)=>{
		console.log(newvalue)
		rendList.value=list.slice((newvalue - 1) * 5, newvalue * 5)
	})
	 
	
</script>

<style>
	.base {
		display: flex;
		flex-direction: column;
		width: 100vw;
		align-items: center;
		height: 100vh;
		overflow-y: scroll;
		background-image: linear-gradient(to right, #fbc2eb, #a6c1ee);
		border: 1px solid rgb(123, 121, 121);
	}

	.controller {
		margin-top: 40px;
		display: flex;
		gap: 20px;
		align-items: center;
	}

	.head {
		/* border: 1px solid rgb(123, 121, 121); */
		width: 100vw;
		height: 10vh;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 26px;
		font-weight: 600;
		color: rgb(74, 72, 72);
	}
</style>